<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>系统常态化运行评分系统</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <style>
        .expand.pear-btn:hover {
            color: currentColor;
            background: none;
        }

        .expand.pear-btn {
            border: 1px solid rgba(255, 255, 255, 0)
        }
    </style>
</head>

<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form id="userForm" class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-form-label">消息类型</div>
                        <div class="layui-input-inline" style="width: 200px;">
                            <select id="newsType" name="newsType">
                                <option value="" selected>请选择消息类型</option>
                                <option value="1">通知</option>
                                <option value="2">文件汇编</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-form-label">发布状态</div>
                        <div class="layui-input-inline" style="width: 200px;">
                            <select id="state" name="state">
                                <option value="" selected>请选择发布状态</option>
                                <option value="1">草稿</option>
                                <option value="2">已发布</option>
                            </select>
                        </div>
                    </div>
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="user-table" lay-filter="user-table"></table>
        </div>
    </div>
<script type="text/html" id="user-bar">
    <button class="pear-btn pear-btn-primary pear-border-blue pear-btn-xs" title="修改"  lay-event="modify"><i
        class="layui-icon layui-icon-edit"></i>修改</button>
    <button class="pear-btn pear-btn-primary pear-border-blue pear-btn-xs" title="删除"  lay-event="delete"><i
        class="layui-icon layui-icon-delete"></i>删除</button>
</script>
<script type="text/html" id="user-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="addNews">
        <i class="layui-icon layui-icon-addition"></i>
        新增消息
    </button>
</script>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script src="../../scripts/utils/request.js"></script>
<script src="../../scripts/utils/auth.js"></script>
<script src="../../scripts/utils/tinymceUtils.js"></script>
<script>

    var selData={};
    function getData(){
        return selData;
    }
    /**
     * 刷新
     */ 
    function refresh(){
        table.reload('user-table');
    }

    var $,table,form,drawer,popup,notice,laydate,layer
    layui.use(['table', 'form', 'jquery', 'drawer', 'popup','notice','laydate','tinymce','layer'], function() {
        table = layui.table;
        form = layui.form;
        $ = layui.jquery;
        drawer = layui.drawer;
        popup = layui.popup;
        notice = layui.notice;
        laydate= layui.laydate;
        layer=layui.layer;
        var tinymce= layui.tinymce;

        var remark=initTinymce(tinymce,'remark');
        

        laydate.render({
            elem: '#pulishTime'
        });


        table.render({
            id:"user-table",
            elem: '#user-table',
            url: baseURL+'/api/news/list',
            method:'post',
            contentType: 'application/json',
            page: true,
            loading:true,
            headers: {
                token: localStorage.getItem("token")
            },
            request: {
                pageName: 'pageIndex', // page
                limitName: 'pageSize', // limit
            },
            where:{
                state:$("#state").val(),
                newsType:$("#newsType").val()
            },
            cols: [[
                {field: 'title', minWidth: 300, title: '标题'},
                {field: 'newsType', minWidth: 120, title: '类型',templet:function(d){
                    if(d.newsType==1){
                        return "<span style='color: #000'>通知</span>";
                    }else{
                        return "<span style='color: green'>制度汇编</span>";
                    }
                }},
                {field: 'state', minWidth: 120, title: '状态',templet:function(d){
                    if(d.state==1){
                        return "<span style='color: red'>草稿</span>";
                    }else{
                        return "<span style='color: green'>已发布</span>";
                    }
                }},
                {field: 'pulishTime', minWidth: 150, title: '发布时间'},
                {field: 'createTime', minWidth: 150, title: '创建时间'},
                {title: '操作',templet: '#user-bar', width: 180, align: 'center'}
            ]],
            skin: 'grid',
            toolbar: '#user-toolbar',
            defaultToolbar: [],
            done: function(res, curr, count) {
                validToken(res);
            }
        });


        /**
         * 每行的按钮
         */
        table.on('tool(user-table)', function(obj) {
            if (obj.event === 'modify') {
                selData=obj.data;
                layer.open({
                    type: 2,
                    offset: 'r',
                    anim: 'slideLeft', // 从右往左
                    area: ['80%', '100%'],
                    shade: 0.1,
                    shadeClose: true,
                    id: 'ID-demo-layer-direction-r',
                    content: './newsmanageredit.html'
                });
            }  else if (obj.event === 'delete') {
                let reqData={id:obj.data.id};
                layer.confirm('确定删除消息？', {
                    icon: 3,
                    title: '提示'
                }, function(index) {
                    layer.close(index);
                    postAjax('/api/news/delete',reqData,function (response){
                        window.refresh();
                    },null);
                });
            }
        });

        /**
         * 新增操作
         */
        table.on('toolbar(user-table)', function(obj) {
            if (obj.event === 'refresh') {
                window.refresh();
            }else if (obj.event === 'addNews') {
                window.addNews();
            } 
        });

        form.on('submit(user-query)', function(data) {
            table.reload('user-table', {
                where: data.field,
                page: {
                    curr: 1 //重新从第 1 页开始
                },
            })
            return false;
        });

        window.refresh = function(param) {
            table.reload('user-table');
        };

        /**
         * 新增评分任务
         */
         window.addNews=function (){
            selData.id=''
            selData.title=''
            selData.newsType='1'
            selData.state='1'
            selData.pulishTime=''
            selData.remark=''
            layer.open({
                type: 2,
                offset: 'r',
                anim: 'slideLeft', // 从右往左
                area: ['80%', '100%'],
                shade: 0.1,
                shadeClose: true,
                id: 'ID-demo-layer-direction-r',
                content: './newsmanageredit.html'
            });
        };


        /**
         * 新增/修改评分
         */
         form.on('submit(lay-user-add)',function (data){
            let reqData=data.field;
            reqData.remark=remark.getContent();
            if(!reqData.id||reqData.id==''){
                postAjax('/api/news/add',reqData,function (response){
                    drawer.closeAll();
                    table.reload('user-table');
                },null);
            }else{
                postAjax('/api/news/modify',reqData,function (response){
                    drawer.closeAll();
                    table.reload('user-table');
                },null);
            }
        });

    });
        
</script>
</body>

</html>